<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<style>
	html,body{
		height:100%;
		font-size:100px;
		font-family:MicrosoftYaHei;
	}
	*{
		padding:0;
		margin:0;
	}
	a:link,a:visited{
	    color:#000;
	    text-decoration: none;
	}
	input{
	    outline: 0;
	    outline: none;
	    padding-left:.1rem;
	    box-sizing:border-box;
	}
	ol,ul {list-style:none;}
	li{list-style-type:none;}
	.shou{
		height:100%;
		width:100%;
		background:#fff;
		box-sizing:border-box;
		padding-right:2.5%;
	}
	.left{
		float:left;
		width:47.5%;
	}
	.left_t{
		width:100%;
		box-sizing:border-box;
		margin-top:.17rem;
		padding-left:4%;
		float:left;
	}
	.clear {
	  	clear: both;
  	}
	.logo{
		width:1.04rem;
		height:.8rem;
		float:left;
		margin-right:10.1%;
	}
	.shu{
		width:50.9%;
		height:.4rem;
		margin-top:.19rem;
		margin-right:5.1%;
		border-radius:.1rem;
		border:.01rem solid #f1f1f2;
		float:left;
	}
	input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
		color: #666; 
		font-size:.16rem;
		color:#a3a3a3;
		padding-left:.04rem;
	}
	.dianH{
		float:left;
		margin-top:.22rem;
		height:.32rem;
		width:.32rem;
		cursor:pointer;
	}
	.left_b{
		width:100%;
		box-sizing:border-box;
		height:auto;
		padding-left:5.2%;
		float:left;
	}
	.boDa{
		float:left;
		width:100%;
		height:1rem;
		background:#f1f1f2;
		margin-top:.2rem;
		position:relative;
	}
	.boDa_z{
		width:3.48rem;
		height:.19rem;
		color:#555;
		float:left;
		margin:.16rem 0 .14rem 2.7%;
		text-align:center;
		position:relative;
	}
	.shouji{
		height:100%;
		width:100%;
		font-size:.18rem;
	}
	.boDa_zL{
		position:absolute;
		top:0;
		left:0;
		color:#555;
		font-size:.18rem;
	}
	.boDa_zR{
		position:absolute;
		top:0;
		right:0;
		color:#555;
		font-size:.18rem;
		cursor:pointer;
	}
	.boDa_iZhu{
		float:left;
		margin-left:2.79rem;
	}
	.boDa_iZi{
		width:.38rem;
		height:.38rem;
		margin-right:.15rem;
		float:left;
		cursor:pointer;
	}
	.boDa_i{
		width:.98rem;
		height:.98rem;
		float:right;
		background:#fff;
		position:absolute;
		top:1px;
		right:1px;
		cursor:pointer;
	}
	.boDa_I{
		width:.57rem;
		height:.57rem;
		margin-top:.2rem;
		margin-left:.22rem;
		float:left;
	}
	.left_time{
		margin-top:.2rem;
		height:.4rem;
		width:100%;
		float:left;
		border:1px solid #f1f1f2;
	}
	.left_timeL{
		color:#555;
		font-size:.18rem;
		margin-left:3.7%;
		line-height:.4rem;
		float:left;
	}
	.kashi{
		width:21.1%;
		height:100%;
		border:0;
		float:left;
	}
	.left_timeC{
		color:#555;
		font-size:.18rem;
		line-height:.4rem;
		float:left;
		margin-left:2%;
	}
	.jieshu{
		width:24.6%;
		height:100%;
		border:0;
		float:left;
	}
	.left_timeR{
		margin-left:4.6%;
		float:left;
		cursor:pointer;
	}
	.fanDa{
		width:.18rem;
		height:.18rem;
		float:left;
		margin-top:.12rem;
	}
	.chaXunq{
		float:left;
		margin-left:.11rem;
		color:#555;
		font-size:.18rem;
		line-height:.4rem;
	}
	.xinxi{
		float:left;
		margin-top:.21rem;
		width:100%;
		height:auto;
		border:1px solid #f1f1f2;
	}
	.xinX_t{
		width:100%;
		height:.4rem;
		background:#f1f1f2;
	}
	.xinX_tL{
		float:left;
		color:#555;
		font-size:.18rem;
		width:33.3%;
		text-align:center;
		line-height:.4rem;
	}
	.xinX_tC{
		float:left;
		color:#555;
		font-size:.18rem;
		width:33.3%;
		text-align:center;
		line-height:.4rem;
	}
	.xinX_tR{
		float:left;
		color:#555;
		font-size:.18rem;
		width:33.3%;
		text-align:center;
		line-height:.4rem;
	}
	.xinX_c{
		width:100%;
	    overflow: auto;
    	max-height: 250px;
	}
	.xinX_ch{
		width:100%;
		margin-top:.2rem;
		height:auto;
	}
	.xinX_cL{
		float:left;
		font-size:.16rem;
		color:#555;
		width:33.3%;
		text-align:center;
	}
	.xinX_cC{
		float:left;
		font-size:.16rem;
		color:#555;
		width:33.3%;
		text-align:center;
	}
	.xinX_cR{
		float:left;
		height:.16rem;
		width:33.3%;
		display:flex;
		justify-content:center;
	}
	.caoZ_o{
		float:left;
		font-size:.14rem;
		color:#555;
		margin-right:.1rem;
		cursor:pointer;
	}
	.caoZ_t{
		float:left;
		font-size:.14rem;
		margin-right:.07rem;
		color:#555;
		cursor:pointer;
	}
	.caoZ_s{
		float:left;
		font-size:.14rem;
		color:#555;
		cursor:pointer;
	}
	.right{
		float:right;
		width:50%;
	}
	.right_tit{
		position:relative;
		height:auto;
		width:100%;
		margin-top:.47rem;
		float:right;
		margin-bottom:.43rem;
	}
	.right_tL{
		position:relative;
		float:left;
		margin-right:2.2rem;
		margin-top:.04rem;
	}
	.zhuanT{
		float:left;
		margin-right:.24rem;
		cursor:pointer;
	}
	.qiu_l,.qiu_b,.qiu_y,.qiu_r{
		width:.12rem;
		height:.12rem;
		border-radius:.12rem;
		margin-top:.05rem;
		margin-right:.07rem;
		float:left;
	}
	.qiu_l{
		background:#308D72;
	}
	.qiu_b{
		background:#555;
	}
	.qiu_y{
		background:#ffa800;
	}
	.qiu_r{
		background:#da532a;
	}
	.zhuanT_z{
		color:#555;
		font-size:.16rem;
		float:left;
	}
	.right_tR{
		float:right;
		cursor:pointer;
	}
	.right_tRi{
		width:.27rem;
		height:.27rem;
		margin-right:.09rem;
		float:left;
	}
	.right_tui{
		color:#555;
		font-size:.2rem;
		line-height:.27rem;
		float:left;
	}
	.right_b{
		float:right;
		width:100%;
	}
	.mar_o{
		margin-right:0;
	}
	.right_bk{
		width:47.9%;
		float:left;
		border:1px solid #f1f1f2;
	}
	.zuiJ{
		margin:.18rem 0 .14rem .26rem;
		color:#555;
		font-size:.18rem;
	}
	.chaXun{
		width:100%;
		box-sizing:border-box;
		border:1px solid #f1f1f2;
		height:.4rem;
		position:absolute;
		top:0;
		left:0;
	}
	.chaXun::-webkit-input-placeholder{ 
		color: #666; 
		font-size:.14rem;
		color:#a3a3a3;
		padding-left:.04rem;
	}
	.right_bkf{
		width: 100%;
    	overflow: auto;
    	height:366px;
    	max-height:366px;
	}
	.right_han{
		width:100%;
		box-sizing:border-box;
		padding:0 .11rem 0 .06rem;
		margin-bottom:.14rem;
		overflow:hidden;
	}
	.tou{
		width:.28rem;
		height:.28rem;
		float:left;
		margin-right:.05rem;
	}
	.name{
		font-size:.16rem;
		float:left;
		margin-right:21.5%;
		color:#555;
		line-height:.28rem;
	}
	.right_hZ{
		float:left;
		width:.9rem;
	}
	.kaiFa{
		float:right;
		font-size:.14rem;
		line-height:.14rem;
		height:.14rem;
		color:#000;
		margin-top:0;
	}
	.fenji{
		font-size:.12rem;
		height:.12rem;
		color:#a3a3a3;
		float:right;
		margin-bottom:0;
	}
	.dian_tu{
		float:right;
		height:.28rem;
		width:.28rem;
		cursor:pointer;
	}
	.mar_r{
		margin-right:3.5%;
	}
	.wai{
		width:100%;
		box-sizing:border-box;
		padding:0 .12rem;
		height:.4rem;
		margin-bottom:.1rem;
		position:relative;
	}
	/**/
	.f5{
		color:#bbb;
	}
</style>
<body>
	<div class="shou">
		<div class="left">
			<div class="left_t">
				<img class="logo" src="./img/logo.png" alt="">
				<input class="shu" type="text" placeholder="输入手机号码或者分机号">
				<img class="dianH" src="./img/dian.png" alt="">
				<div class="clear"></div>
			</div>
			<div class="left_b">
				<div class="boDa">
					<div class="boDa_z">
						<div class="boDa_zL">来电号码： </div>
						<div class="shouji">177-1419-8992</div>
						<div class="boDa_zR"> 复制电话</div>
					</div>
					<div class="boDa_iZhu">
						<img class="boDa_iZi" src="./img/dianLu.png" alt="">
						<img class="boDa_iZi" src="./img/dianHo.png" alt="">
						<div class="clear"></div>
					</div>
					<div class="boDa_i">
						<img class="boDa_I" src="./img/dianDon.gif" alt="">
						<div class="clear"></div>
					</div>
					<div class="clear"></div>
				</div>
				<div class="left_time">
					<div class="left_timeL">开始时间</div>
					<input class="kashi" type="text">
					<div class="left_timeC">结束时间</div>
					<input class="jieshu" type="text">
					<div class="left_timeR">
						<img class="fanDa" src="./img/fanDa.png" alt="">
						<div class="chaXunq">查询</div>
						<div class="clear"></div>
					</div>
					<div class="clear"></div>
				</div>
				<div class="xinxi">
					<div class="xinX_t">
						<div class="xinX_tL">来电号码</div>
						<div class="xinX_tC">时间</div>
						<div class="xinX_tR">操作</div>
						<div class="clear"></div>
					</div>
					<div class="xinX_c">
						<div class="xinX_ch">
							<div class="xinX_cL">177714198992</div>
							<div class="xinX_cC">2017/22/13 12:10</div>
							<div class="xinX_cR">
								<div class="caoZ_o">复制电话</div>
								<div class="caoZ_t">复制录音</div>
								<div class="caoZ_s">回拨</div>
								<div class="clear"></div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="xinX_ch">
							<div class="xinX_cL">177714198992</div>
							<div class="xinX_cC">2017/22/13 12:10</div>
							<div class="xinX_cR">
								<div class="caoZ_o">复制电话</div>
								<div class="caoZ_t">复制录音</div>
								<div class="caoZ_s">回拨</div>
								<div class="clear"></div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="xinX_ch">
							<div class="xinX_cL">177714198992</div>
							<div class="xinX_cC">2017/22/13 12:10</div>
							<div class="xinX_cR">
								<div class="caoZ_o">复制电话</div>
								<div class="caoZ_t">复制录音</div>
								<div class="caoZ_s">回拨</div>
								<div class="clear"></div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="xinX_ch">
							<div class="xinX_cL">177714198992</div>
							<div class="xinX_cC">2017/22/13 12:10</div>
							<div class="xinX_cR">
								<div class="caoZ_o">复制电话</div>
								<div class="caoZ_t">复制录音</div>
								<div class="caoZ_s">回拨</div>
								<div class="clear"></div>
							</div>
							<div class="clear"></div>
						</div>

						<div class="xinX_ch">
							<div class="xinX_cL">177714198992</div>
							<div class="xinX_cC">2017/22/13 12:10</div>
							<div class="xinX_cR">
								<div class="caoZ_o">复制电话</div>
								<div class="caoZ_t">复制录音</div>
								<div class="caoZ_s">回拨</div>
								<div class="clear"></div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="xinX_ch">
							<div class="xinX_cL">177714198992</div>
							<div class="xinX_cC">2017/22/13 12:10</div>
							<div class="xinX_cR">
								<div class="caoZ_o">复制电话</div>
								<div class="caoZ_t">复制录音</div>
								<div class="caoZ_s">回拨</div>
								<div class="clear"></div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="xinX_ch">
							<div class="xinX_cL">177714198992</div>
							<div class="xinX_cC">2017/22/13 12:10</div>
							<div class="xinX_cR">
								<div class="caoZ_o">复制电话</div>
								<div class="caoZ_t">复制录音</div>
								<div class="caoZ_s">回拨</div>
								<div class="clear"></div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="xinX_ch">
							<div class="xinX_cL">177714198992</div>
							<div class="xinX_cC">2017/22/13 12:10</div>
							<div class="xinX_cR">
								<div class="caoZ_o">复制电话</div>
								<div class="caoZ_t">复制录音</div>
								<div class="caoZ_s">回拨</div>
								<div class="clear"></div>
							</div>
							<div class="clear"></div>
						</div>
					</div>
					<div class="clear"></div>
				</div>
				<div class="clear"></div>
			</div>
			<div class="clear"></div>
		</div>
		<div class="right">
			<div class="right_tit">
				<div class="right_tL">
					<div class="zhuanT">
						<div class="qiu_l"></div>
						<div class="zhuanT_z f5">签入</div>
					</div>
					<div class="zhuanT">
						<div class="qiu_b"></div>
						<div class="zhuanT_z">签出</div>
					</div>
					<div class="zhuanT">
						<div class="qiu_y"></div>
						<div class="zhuanT_z f5">示闲</div>
					</div>
					<div class="zhuanT mar_o">
						<div class="qiu_r"></div>
						<div class="zhuanT_z">示忙</div>
					</div>
				</div>
				<div class="right_tR">
					<img class="right_tRi" src="./img/tuichu.png" alt="">
					<div class="right_tui">退出</div>
					<div class="clear"></div>
				</div>
				<div class="clear"></div>
			</div>
			<div class="right_b">
				<div class="right_bk mar_r">
					<div class="zuiJ">最近联系人</div>
					<div class="wai">
						<input class="chaXun" type="text" placeholder="输入分机或者人名或者部门查询">
					</div>
					<div class="right_bkf">
						<div class="right_han">
							<img class="tou" src="./img/tou.png" alt="">
							<div class="name">刘闯</div>
							<div class="right_hZ">
								<div class="kaiFa">开发组</div>
								<div class="fenji">分机号：60063</div>
								<div class="clear"></div>
							</div>
							<img class="dian_tu" src="./img/daDian.png" alt="">
							<div class="clear"></div>
						</div>
						<div class="right_han">
							<img class="tou" src="./img/tou.png" alt="">
							<div class="name">刘闯</div>
							<div class="right_hZ">
								<div class="kaiFa">开发组</div>
								<div class="fenji">分机号：60063</div>
								<div class="clear"></div>
							</div>
							<img class="dian_tu" src="./img/daDian.png" alt="">
							<div class="clear"></div>
						</div>
						<div class="right_han">
							<img class="tou" src="./img/tou.png" alt="">
							<div class="name">刘闯</div>
							<div class="right_hZ">
								<div class="kaiFa">开发组</div>
								<div class="fenji">分机号：60063</div>
								<div class="clear"></div>
							</div>
							<img class="dian_tu" src="./img/daDian.png" alt="">
							<div class="clear"></div>
						</div>
						<div class="right_han">
							<img class="tou" src="./img/tou.png" alt="">
							<div class="name">刘闯</div>
							<div class="right_hZ">
								<div class="kaiFa">开发组</div>
								<div class="fenji">分机号：60063</div>
								<div class="clear"></div>
							</div>
							<img class="dian_tu" src="./img/daDian.png" alt="">
							<div class="clear"></div>
						</div>
						<div class="right_han">
							<img class="tou" src="./img/tou.png" alt="">
							<div class="name">刘闯</div>
							<div class="right_hZ">
								<div class="kaiFa">开发组</div>
								<div class="fenji">分机号：60063</div>
								<div class="clear"></div>
							</div>
							<img class="dian_tu" src="./img/daDian.png" alt="">
							<div class="clear"></div>
						</div>
						<div class="right_han">
							<img class="tou" src="./img/tou.png" alt="">
							<div class="name">刘闯</div>
							<div class="right_hZ">
								<div class="kaiFa">开发组</div>
								<div class="fenji">分机号：60063</div>
								<div class="clear"></div>
							</div>
							<img class="dian_tu" src="./img/daDian.png" alt="">
							<div class="clear"></div>
						</div>
						<div class="right_han">
							<img class="tou" src="./img/tou.png" alt="">
							<div class="name">刘闯</div>
							<div class="right_hZ">
								<div class="kaiFa">开发组</div>
								<div class="fenji">分机号：60063</div>
								<div class="clear"></div>
							</div>
							<img class="dian_tu" src="./img/daDian.png" alt="">
							<div class="clear"></div>
						</div>
						<div class="right_han">
							<img class="tou" src="./img/tou.png" alt="">
							<div class="name">刘闯</div>
							<div class="right_hZ">
								<div class="kaiFa">开发组</div>
								<div class="fenji">分机号：60063</div>
								<div class="clear"></div>
							</div>
							<img class="dian_tu" src="./img/daDian.png" alt="">
							<div class="clear"></div>
						</div>
						<div class="right_han">
							<img class="tou" src="./img/tou.png" alt="">
							<div class="name">刘闯</div>
							<div class="right_hZ">
								<div class="kaiFa">开发组</div>
								<div class="fenji">分机号：60063</div>
								<div class="clear"></div>
							</div>
							<img class="dian_tu" src="./img/daDian.png" alt="">
							<div class="clear"></div>
						</div>
						<div class="right_han">
							<img class="tou" src="./img/tou.png" alt="">
							<div class="name">刘闯</div>
							<div class="right_hZ">
								<div class="kaiFa">开发组</div>
								<div class="fenji">分机号：60063</div>
								<div class="clear"></div>
							</div>
							<img class="dian_tu" src="./img/daDian.png" alt="">
							<div class="clear"></div>
						</div>
						<div class="right_han">
							<img class="tou" src="./img/tou.png" alt="">
							<div class="name">刘闯</div>
							<div class="right_hZ">
								<div class="kaiFa">开发组</div>
								<div class="fenji">分机号：60063</div>
								<div class="clear"></div>
							</div>
							<img class="dian_tu" src="./img/daDian.png" alt="">
							<div class="clear"></div>
						</div>
					</div>
					<div class="clear"></div>
				</div>
				<div class="right_bk">
					<div class="zuiJ">最近联系人</div>
					<div class="wai">
						<input class="chaXun" type="text" placeholder="输入分机或者人名或者部门查询">
					</div>
					<div class="right_bkf">
						<div class="right_han">
							<img class="tou" src="./img/tou.png" alt="">
							<div class="name">刘闯</div>
							<div class="right_hZ">
								<div class="kaiFa">开发组</div>
								<div class="fenji">分机号：60063</div>
								<div class="clear"></div>
							</div>
							<img class="dian_tu" src="./img/daDian.png" alt="">
							<div class="clear"></div>
						</div>
						<div class="right_han">
							<img class="tou" src="./img/tou.png" alt="">
							<div class="name">刘闯</div>
							<div class="right_hZ">
								<div class="kaiFa">开发组</div>
								<div class="fenji">分机号：60063</div>
								<div class="clear"></div>
							</div>
							<img class="dian_tu" src="./img/daDian.png" alt="">
							<div class="clear"></div>
						</div>
						<div class="right_han">
							<img class="tou" src="./img/tou.png" alt="">
							<div class="name">刘闯</div>
							<div class="right_hZ">
								<div class="kaiFa">开发组</div>
								<div class="fenji">分机号：60063</div>
								<div class="clear"></div>
							</div>
							<img class="dian_tu" src="./img/daDian.png" alt="">
							<div class="clear"></div>
						</div>
						<div class="right_han">
							<img class="tou" src="./img/tou.png" alt="">
							<div class="name">刘闯</div>
							<div class="right_hZ">
								<div class="kaiFa">开发组</div>
								<div class="fenji">分机号：60063</div>
								<div class="clear"></div>
							</div>
							<img class="dian_tu" src="./img/daDian.png" alt="">
							<div class="clear"></div>
						</div>
						<div class="right_han">
							<img class="tou" src="./img/tou.png" alt="">
							<div class="name">刘闯</div>
							<div class="right_hZ">
								<div class="kaiFa">开发组</div>
								<div class="fenji">分机号：60063</div>
								<div class="clear"></div>
							</div>
							<img class="dian_tu" src="./img/daDian.png" alt="">
							<div class="clear"></div>
						</div>
					</div>
					<div class="clear"></div>
				</div>
				<div class="clear"></div>
			</div>
			<div class="clear"></div>
		</div>
	</div>
</body>
<script>
	
</script>
</html>